<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预约管理 - 图书馆管理系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="admin-container">
        <!-- 左侧边栏 -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <h1 class="logo">
                    <i class="fas fa-book"></i>
                    <span>图书馆管理系统</span>
                </h1>
            </div>
            <nav class="sidebar-nav">
                <ul>
                    <li class="nav-item">
                        <a href="index.html" class="nav-link">
                            <i class="fas fa-tachometer-alt"></i>
                            <span>系统概览</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="seat-management.html" class="nav-link">
                            <i class="fas fa-chair"></i>
                            <span>座位管理</span>
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a href="booking-management.html" class="nav-link">
                            <i class="fas fa-calendar-alt"></i>
                            <span>预约管理</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="user-management.html" class="nav-link">
                            <i class="fas fa-users"></i>
                            <span>用户管理</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="data-analysis.html" class="nav-link">
                            <i class="fas fa-chart-bar"></i>
                            <span>数据分析</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="report-statistics.html" class="nav-link">
                            <i class="fas fa-file-alt"></i>
                            <span>报表统计</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="system-settings.html" class="nav-link">
                            <i class="fas fa-cog"></i>
                            <span>系统设置</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </aside>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 顶部导航栏 -->
            <header class="top-navbar">
                <div class="navbar-left">
                    <button class="menu-toggle" id="menuToggle">
                        <i class="fas fa-bars"></i>
                    </button>
                    <h2 class="page-title">预约管理</h2>
                </div>
                <div class="navbar-right">
                    <div class="search-box">
                        <input type="text" placeholder="搜索预约...">
                        <i class="fas fa-search"></i>
                    </div>
                    <div class="notification">
                        <i class="fas fa-bell"></i>
                        <span class="badge">5</span>
                    </div>
                    <div class="user-profile">
                        <img src="assets/avatar-admin.png" alt="管理员头像">
                        <span>管理员</span>
                    </div>
                </div>
            </header>

            <!-- 预约管理内容 -->
            <div class="booking-management">
                <!-- 工具栏 -->
                <div class="toolbar">
                    <div class="filter-container">
                        <div class="filter-item">
                            <label>预约状态:</label>
                            <select class="form-control">
                                <option value="all">全部状态</option>
                                <option value="pending">待确认</option>
                                <option value="confirmed">已确认</option>
                                <option value="cancelled">已取消</option>
                                <option value="completed">已完成</option>
                                <option value="overdue">已逾期</option>
                            </select>
                        </div>
                        <div class="filter-item">
                            <label>日期范围:</label>
                            <input type="date" class="form-control">
                            <span class="date-separator">至</span>
                            <input type="date" class="form-control">
                        </div>
                        <div class="filter-item">
                            <label>楼层:</label>
                            <select class="form-control">
                                <option value="all">全部楼层</option>
                                <option value="1">1楼</option>
                                <option value="2">2楼</option>
                                <option value="3">3楼</option>
                                <option value="4">4楼</option>
                                <option value="5">5楼</option>
                            </select>
                        </div>
                    </div>
                    <div class="action-buttons">
                        <button class="btn btn-primary">
                            <i class="fas fa-filter"></i> 高级筛选
                        </button>
                        <button class="btn btn-outline">
                            <i class="fas fa-download"></i> 导出数据
                        </button>
                        <button class="btn btn-outline">
                            <i class="fas fa-refresh"></i> 刷新
                        </button>
                    </div>
                </div>

                <!-- 预约概览卡片 -->
                <div class="stats-cards">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-calendar-check"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-value">1,245</div>
                            <div class="stat-label">今日预约总数</div>
                        </div>
                        <div class="stat-trend positive">
                            <i class="fas fa-arrow-up"></i> 12%
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-value">342</div>
                            <div class="stat-label">进行中预约</div>
                        </div>
                        <div class="stat-trend positive">
                            <i class="fas fa-arrow-up"></i> 8%
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-times-circle"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-value">56</div>
                            <div class="stat-label">已取消预约</div>
                        </div>
                        <div class="stat-trend negative">
                            <i class="fas fa-arrow-down"></i> 5%
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-exclamation-triangle"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-value">23</div>
                            <div class="stat-label">异常预约</div>
                        </div>
                        <div class="stat-trend positive">
                            <i class="fas fa-arrow-up"></i> 3%
                        </div>
                    </div>
                </div>

                <!-- 预约表格 -->
                <div class="card">
                    <div class="card-header">
                        <h3>预约列表</h3>
                        <div class="table-info">
                            <span>共 2,842 条预约记录</span>
                        </div>
                    </div>
                    <div class="table-container">
                        <table class="data-table" id="bookingTable">
                            <thead>
                                <tr>
                                    <th><input type="checkbox"></th>
                                    <th>预约ID</th>
                                    <th>用户</th>
                                    <th>座位号</th>
                                    <th>预约时间</th>
                                    <th>结束时间</th>
                                    <th>状态</th>
                                    <th>操作时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>BOOK20231020001</td>
                                    <td>张三</td>
                                    <td>A101</td>
                                    <td>2023-10-20 09:00</td>
                                    <td>2023-10-20 12:00</td>
                                    <td><span class="status active">已确认</span></td>
                                    <td>2023-10-19 14:30</td>
                                    <td>
                                        <button class="action-btn view">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="action-btn edit">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="action-btn cancel">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>BOOK20231020002</td>
                                    <td>李四</td>
                                    <td>B203</td>
                                    <td>2023-10-20 10:30</td>
                                    <td>2023-10-20 15:30</td>
                                    <td><span class="status pending">待确认</span></td>
                                    <td>2023-10-19 16:45</td>
                                    <td>
                                        <button class="action-btn view">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="action-btn edit">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="action-btn confirm">
                                            <i class="fas fa-check"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>BOOK20231020003</td>
                                    <td>王五</td>
                                    <td>C305</td>
                                    <td>2023-10-19 08:00</td>
                                    <td>2023-10-19 11:00</td>
                                    <td><span class="status completed">已完成</span></td>
                                    <td>2023-10-18 18:20</td>
                                    <td>
                                        <button class="action-btn view">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>BOOK20231020004</td>
                                    <td>赵六</td>
                                    <td>D402</td>
                                    <td>2023-10-19 14:00</td>
                                    <td>2023-10-19 17:00</td>
                                    <td><span class="status expired">已逾期</span></td>
                                    <td>2023-10-18 20:15</td>
                                    <td>
                                        <button class="action-btn view">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="action-btn delete">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>BOOK20231020005</td>
                                    <td>孙七</td>
                                    <td>E501</td>
                                    <td>2023-10-20 13:00</td>
                                    <td>2023-10-20 16:00</td>
                                    <td><span class="status cancelled">已取消</span></td>
                                    <td>2023-10-19 21:30</td>
                                    <td>
                                        <button class="action-btn view">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="action-btn delete">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="card-footer">
                        <div class="pagination">
                            <ul>
                                <li><a href="#">上一页</a></li>
                                <li><a href="#" class="active">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">下一页</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 近期预约日历 -->
                <div class="card">
                    <div class="card-header">
                        <h3>近期预约日历</h3>
                        <div class="calendar-controls">
                            <button class="btn btn-outline btn-sm">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <span>2023年10月</span>
                            <button class="btn btn-outline btn-sm">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="calendar-placeholder">
                            <p>预约日历加载中...</p>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script src="js/main.js"></script>
    <script src="js/booking-management.js"></script>
</body>
</html>